<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../../../layui/layui.all.js"></script>
    <link rel="stylesheet" href="../../../layui/css/layui.css">
    <script type="text/javascript" src="../../lay/extends/tableSelect.js"></script>
    <script type="text/javascript" src="../../lay/modules/api.js"></script>
    <title>TableSelect</title>
</head>
<body>
    <form class="layui-form" action="" style="padding:20px;">
        <div class="layui-form-item">
            <label class="layui-form-label">单行输入框</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证必填项</label>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">多选</label>
            <div class="layui-input-block">
                <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" id="demo">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="form-group-submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</body>
<script type="text/javascript">
    var tableSelect = layui.tableSelect;
    var api = layui.api;
    tableSelect.render({
        elem: '#demo',
        searchKey: 'my',
        searchPlaceholder: '自定义文字和name',
        table: {
            url:'/json/table.js',
            cols: [[
                { type: 'checkbox' },
                { field: 'id', title: 'ID', width:100 },
                { field: 'username', title: '姓名', width:300 },
                { field: 'sex', title: '性别', width:100 }
            ]]
        },
        done: function (elem, data) {
            var NEWJSON = []
            layui.each(data.data, function (index, item) {
                NEWJSON.push(item.username)
            })
            elem.val(NEWJSON.join(","))
        }
    })


    tableSelect.render({
        elem: '#demo2',
        table: {
            url:'table.json',
            cols: [[
                { type: 'radio' },
                { field: 'id', title: 'ID' },
                { field: 'username', title: '姓名' },
                { field: 'sex', title: '性别' }
            ]]
        },
        done: function (elem, data) {
            var NEWJSON = []
            layui.each(data.data, function (index, item) {
                NEWJSON.push(item.username)
            })
            elem.val(NEWJSON.join(","))
        }
    })

</script>
</html>